<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
    <style>
        .div1{
            width: 300px;
            height: 200px;
            margin: 20px auto;
            background: url("statics/image/1.jpg") 0 0 no-repeat;
            opacity: 0.7;
        }
        iframe{
            width: 100%;
            height: 500px;
        }
        h3{
            text-align: center;
        }
        p{
            margin-top: 10%;
            margin-left: 30%;
        }
    </style>
</head>
<body>
<script>
    //窗口加载的时候就会加载这个函数
     window.onload=function time(){
         let date=new Date();
         document.getElementById(`currentTime`).innerText=date.getTime();
     }
     function loadPage(){
        let pageUrl=document.getElementById(`url`).value;
        console.log(pageUrl);
        document.getElementById(`iframePosition`).src=pageUrl;
     }
</script>

<div class="div1">

    <p>输入要加载的地址：<span id="currentTime"></span></p>
    <p><label for="url"></label><input type="text" id="url"></p>
    <p><input type="button" value="加载" onclick="loadPage()"></p>

</div>
<div class="div2">
    <h3>加载页面的位置：</h3>
    <iframe id="iframePosition">

    </iframe>
</div>
</body>
</html>